<script setup>
import { useRouter, RouterView } from 'vue-router';
import { ref, onMounted } from 'vue';
import { upload_excel } from '../server/upload_excel';

let iconList = {
    doc: '/word.jpg',
    ppt: '/ppt.jpg',
    excel: '/excel.jpg',
};
let docList = ref([
    // {
    //     id: 1,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 2,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 3,
    //     type: 'excel',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 4,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 5,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 11,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 12,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 13,
    //     type: 'excel',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 14,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 15,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 21,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 22,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 23,
    //     type: 'excel',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 24,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 25,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 31,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 32,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 33,
    //     type: 'excel',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 34,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 35,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 41,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 42,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 43,
    //     type: 'excel',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 44,
    //     type: 'ppt',
    //     name: 'xxxx.docx'
    // }, {
    //     id: 45,
    //     type: 'doc',
    //     name: 'xxxx.docx'
    // }
]);

const router = useRouter();

function showLoadFilePage() {
    router.push('/loadFile');
}

function showExcel(fileId) {
    router.push({ path: '/showExcel', query: { id: fileId } });
}

// 获取用户所有文件
function getAllFiles() {
    upload_excel.getAllFiles().then(res => {
        docList.value = res.data;
    }).catch((err) => {
        console.log(err);
    });
}

// 生命周期绑定
onMounted(() => {
    getAllFiles();
});

</script>

<template>
    <div class="box">
        <div class="left-box">
            <div class="btn-list">
                <div class="btn" @click="showLoadFilePage">导入文档</div>
            </div>
            <div class="doc-list">
                <div class="doc-title">我的文档</div>
                <div class="doc-item" v-for="item in docList" :style="`--icon: url(${iconList[item.type]});`" :key="item.id" @click="showExcel(item.id)">{{ item.name }}</div>
            </div>
        </div>
        <div class="right-box">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<style scoped>
.box {
    display: flex;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.left-box {
    width: 20%;
    min-width: 250px;
    border-right: 1px solid #ccc;
    overflow-x: hidden;
    overflow-y: auto;
}
.btn-list {
    width: 100%;
    margin-bottom: 20px;
}
.btn {
    width: 70%;
    height: auto;
    background-color: rgb(30, 111, 255);
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
.btn:hover {
    background-color: rgb(30, 98, 216);
}
.doc-list {
    width: 100%;
}
.doc-title {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    padding-left: 30px;
    font-weight: 700;
    background-color: #fafafa;
}
.doc-item {
    box-sizing: border-box;
    width: 100%;
    padding: 17px;
    padding-left: 70px;
    position: relative;
}
.doc-item::before {
    --size: 30px;
    content: "";
    display: block;
    width: var(--size);
    height: var(--size);
    background-image: var(--icon);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 35px;
    transform: translateY(-50%);
}
.doc-item:hover {
    background-color: #f5f5f5;
}
.right-box {
    flex: 1;
    height: 100%;
}
</style>
